<template>
<div class="container">
    <div class="sub-menu">
        <div class="btn-group">
            <div class="sub-title">入沈人员数据库</div>
            <Button @click="value1 = true" type="default" ghost><Icon type="ios-share-alt" /> 返回首页</Button>
        </div>
    </div>
    <div class="statistics-group">
        <Row :gutter="16">
            <Col span="4">
                <div class="item style01">
                    <Icon type="ios-aperture" class="icon" />
                    <div class="content">
                        <div class="statistics">35382人</div>
                        <div class="txt">总人数</div>
                    </div>
                </div>
            </Col>
            <Col span="4">
                <div class="item style02">
                    <Icon type="ios-aperture" class="icon" />
                    <div class="content">
                        <div class="statistics">35382人</div>
                        <div class="txt">总人数</div>
                    </div>
                </div>
            </Col>
            <Col span="4">
                <div class="item style03">
                    <Icon type="ios-aperture" class="icon" />
                    <div class="content">
                        <div class="statistics">35382人</div>
                        <div class="txt">总人数</div>
                    </div>
                </div>
            </Col>
            <Col span="4">
                <div class="item style04">
                    <Icon type="ios-aperture" class="icon" />
                    <div class="content">
                        <div class="statistics">35382人</div>
                        <div class="txt">总人数</div>
                    </div>
                </div>
            </Col>
            <Col span="4">
                <div class="item style04">
                    <Icon type="ios-aperture" class="icon" />
                    <div class="content">
                        <div class="statistics">35382人</div>
                        <div class="txt">总人数</div>
                    </div>
                </div>
            </Col>
            <Col span="4">
                <div class="item style04">
                    <Icon type="ios-aperture" class="icon" />
                    <div class="content">
                        <div class="statistics">35382人</div>
                        <div class="txt">总人数</div>
                    </div>
                </div>
            </Col>
        </Row>
    </div>
    <div class="report-content">
        <div class="title">
            <div class="sub-title">
                <div class="group">
                    <span>数据库记录</span>
                    <Input suffix="ios-search" placeholder="全库搜索" style="width: auto" />
                    <Button @click="value4 = true" type="default" ghost><Icon type="ios-list" /> 选择列表项</Button>
                    <div class="county-sel">
                        <CheckboxGroup v-model="border">
                            <Checkbox label="全市" ></Checkbox>
                            <Checkbox label="和平" ></Checkbox>
                            <Checkbox label="沈河" ></Checkbox>
                            <Checkbox label="铁西" ></Checkbox>
                            <Checkbox label="皇姑" ></Checkbox>
                            <Checkbox label="大东" ></Checkbox>
                            <Checkbox label="浑南" ></Checkbox>
                            <Checkbox label="于洪" ></Checkbox>
                            <Checkbox label="沈北" ></Checkbox>
                            <Checkbox label="苏家屯" ></Checkbox>
                            <Checkbox label="辽中" ></Checkbox>
                            <Checkbox label="新民" ></Checkbox>
                            <Checkbox label="法库" ></Checkbox>
                            <Checkbox label="康平" ></Checkbox>
                        </CheckboxGroup>
                    </div>
                </div>
                <div class="group">
                    <Button @click="value2 = true" type="default" ghost><Icon type="ios-filing" /> 导出数据</Button>
                    <div><span>12364条</span>数据信息</div>
                </div>
            </div>
        </div>
        <Table border :columns="columns1" :data="data1" style="width: 100%; height: auto;"></Table>
        <Page :total="100" show-sizer />
    </div>
    <Drawer
            title="数据筛选"
            placement="left"
            v-model="value3"
            width="800"
            :mask-closable="false"
            :styles="styles"
    >
        <div class="inner-frame">
            <div class="title">入境情况查询</div>
            <Row :gutter="10">
                <Col span="8">
                    <Input suffix="ios-search" placeholder="请输入证件号" style="width: 100%;" class="item" />
                </Col>
                <Col span="8">
                    <Input suffix="ios-search" placeholder="请输入姓名" style="width: 100%;" class="item" />
                </Col>
                <Col span="8">
                    <Input suffix="ios-search" placeholder="请输入电话号" style="width: 100%;" class="item" />
                </Col>
            </Row>
            <Row :gutter="10">
                <Col span="8">
                    <Select v-model="model1" style="width:100%" placeholder="请选择国籍">
                        <Option v-for="item in countryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Col>
                <Col span="8">
                    <Select v-model="model1" style="width:100%" placeholder="请选择户籍地址">
                        <Option v-for="item in countryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Col>
                <Col span="8">
                    <Select v-model="model1" style="width:100%" placeholder="人员来自国">
                        <Option v-for="item in countryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Col>
            </Row>
            <Row :gutter="10">
                <Col span="8">
                    <DatePicker type="date" placeholder="入境开始时间" class="item" style="width: 100%;"></DatePicker>
                </Col>
                <Col span="8">
                    <DatePicker type="date" placeholder="入境结束时间" class="item" style="width: 100%;"></DatePicker>
                </Col>
                <Col span="8">
                    <Select v-model="model1" style="width:100%" placeholder="人员入境口岸">
                        <Option v-for="item in countryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Col>
            </Row>
            <Row :gutter="10">
                <Col span="6">
                    <DatePicker type="date" placeholder="人员来沈开始时间" class="item" style="width: 100%;"></DatePicker>
                </Col>
                <Col span="6">
                    <DatePicker type="date" placeholder="人员来沈结束时间" class="item" style="width: 100%;"></DatePicker>
                </Col>
                <Col span="6">
                    <Select v-model="model1" style="width:100%" placeholder="目标城市">
                        <Option v-for="item in countryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Col>
                <Col span="6">
                    <Select v-model="model1" style="width:100%" placeholder="现住址">
                        <Option v-for="item in countryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Col>
            </Row>
            <div class="title">中转人员情况查询</div>
            <Row :gutter="10">
                <Col span="8">
                    <DatePicker type="date" placeholder="人员离沈开始时间" class="item" style="width: 100%;"></DatePicker>
                </Col>
                <Col span="8">
                    <DatePicker type="date" placeholder="人员离沈结束时间" class="item" style="width: 100%;"></DatePicker>
                </Col>
                <Col span="8">
                    <Select v-model="model1" style="width:100%" placeholder="目的地城市">
                        <Option v-for="item in countryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Col>
            </Row>
            <Row :gutter="10">
                <Col span="6">
                    <Select v-model="model1" style="width:100%" placeholder="离沈方式">
                        <Option v-for="item in countryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Col>
                <Col span="6">
                    <Input suffix="ios-search" placeholder="离沈交通工具班次(车次)" style="width: 100%;" class="item" />
                </Col>
                <Col span="6">
                    <Input suffix="ios-search" placeholder="机舱等级(车厢号/车牌号)" style="width: 100%;" class="item" />
                </Col>
                <Col span="6">
                    <Input suffix="ios-search" placeholder="座位号" style="width: 100%;" class="item" />
                </Col>
            </Row>
            <div class="title">密接人员情况查询</div>
            <Row :gutter="10">
                <Col span="6">
                    <Input suffix="ios-search" placeholder="患者姓名" style="width: 100%;" class="item" />
                </Col>
                <Col span="6">
                    <Select v-model="model1" style="width:100%" placeholder="来源国家">
                        <Option v-for="item in countryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Col>
                <Col span="6">
                    <DatePicker type="date" placeholder="确诊开始时间" class="item" style="width: 100%;"></DatePicker>
                </Col>
                <Col span="6">
                    <DatePicker type="date" placeholder="确诊结束时间" class="item" style="width: 100%;"></DatePicker>
                </Col>
            </Row>
            <Row :gutter="10">
                <Col span="6">
                    <DatePicker type="date" placeholder="密接开始时间" class="item" style="width: 100%;"></DatePicker>
                </Col>
                <Col span="6">
                    <DatePicker type="date" placeholder="密接结束时间" class="item" style="width: 100%;"></DatePicker>
                </Col>
                <Col span="6">
                    <Input suffix="ios-search" placeholder="密接方式" style="width: 100%;" class="item" />
                </Col>
                <Col span="6">
                    <Input suffix="ios-search" placeholder="密接人现状" style="width: 100%;" class="item" />
                </Col>
            </Row>
            <Row :gutter="10">
                <Col span="6">
                    <Input suffix="ios-search" placeholder="患者证件号" style="width: 100%;" class="item" />
                </Col>
                <Col span="6">
                    <Input suffix="ios-search" placeholder="患者电话号" style="width: 100%;" class="item" />
                </Col>
            </Row>
            <div class="title">接触人员情况查询</div>
            <Row :gutter="10">
                <Col span="6">
                    <Input suffix="ios-search" placeholder="患者姓名" style="width: 100%;" class="item" />
                </Col>
                <Col span="6">
                    <Select v-model="model1" style="width:100%" placeholder="来源国家">
                        <Option v-for="item in countryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Col>
                <Col span="8">
                    <DatePicker type="date" placeholder="确诊开始时间" class="item" style="width: 100%;"></DatePicker>
                </Col>
                <Col span="8">
                    <DatePicker type="date" placeholder="确诊结束时间" class="item" style="width: 100%;"></DatePicker>
                </Col>
            </Row>
            <Row :gutter="10">
                <Col span="6">
                    <DatePicker type="date" placeholder="接触开始时间" class="item" style="width: 100%;"></DatePicker>
                </Col>
                <Col span="6">
                    <DatePicker type="date" placeholder="接触结束时间" class="item" style="width: 100%;"></DatePicker>
                </Col>
                <Col span="6">
                    <Input suffix="ios-search" placeholder="接触方式" style="width: 100%;" class="item" />
                </Col>
                <Col span="6">
                    <Input suffix="ios-search" placeholder="接触人现状" style="width: 100%;" class="item" />
                </Col>
            </Row>
            <Row :gutter="10">
                <Col span="6">
                    <Input suffix="ios-search" placeholder="患者证件号" style="width: 100%;" class="item" />
                </Col>
                <Col span="6">
                    <Input suffix="ios-search" placeholder="患者电话号" style="width: 100%;" class="item" />
                </Col>
            </Row>
            <div class="title">核酸检测情况查询</div>
            <Row :gutter="10">
                <Col span="8">
                    <DatePicker type="date" placeholder="采样开始时间" class="item" style="width: 100%;"></DatePicker>
                </Col>
                <Col span="8">
                    <DatePicker type="date" placeholder="采样结束时间" class="item" style="width: 100%;"></DatePicker>
                </Col>
                <Col span="8">
                    <Select v-model="model1" style="width:100%" placeholder="采样来源">
                        <Option v-for="item in countryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Col>
            </Row>
            <Row :gutter="10">
                <Col span="12">
                    <Select v-model="model1" style="width:100%" placeholder="检验结果">
                        <Option v-for="item in countryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Col>
                <Col span="12">
                    <Select v-model="model1" style="width:100%" placeholder="收治处置">
                        <Option v-for="item in countryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Col>
            </Row>
            <div class="title">隔离人员情况查询</div>
            <Row :gutter="10">
                <Col span="8">
                    <DatePicker type="date" placeholder="隔离开始时间" class="item" style="width: 100%;"></DatePicker>
                </Col>
                <Col span="8">
                    <DatePicker type="date" placeholder="隔离结束时间" class="item" style="width: 100%;"></DatePicker>
                </Col>
                <Col span="8">
                    <Select v-model="model1" style="width:100%" placeholder="隔离方式">
                        <Option v-for="item in countryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Col>
            </Row>
            <Row :gutter="10">
                <Col span="8">
                    <Select v-model="model1" style="width:100%" placeholder="隔离地点">
                        <Option v-for="item in countryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Col>
                <Col span="8">
                    <Select v-model="model1" style="width:100%" placeholder="隔离管理单位">
                        <Option v-for="item in countryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Col>
                <Col span="8">
                    <Select v-model="model1" style="width:100%" placeholder="隔离管理人">
                        <Option v-for="item in countryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Col>
            </Row>
        </div>
        <div class="demo-drawer-footer">
            <Button style="margin-right: 8px" @click="value3 = false">取消</Button>
            <Button type="primary" @click="value3 = false">确定</Button>
        </div>
    </Drawer>
    <Drawer
            title="数据显示"
            v-model="value2"
            width="800"
            :mask-closable="false"
            :styles="styles"
            placement="left"
    >
        <div class="inner-frame">
            <Row :gutter="10">
                <Col span="3"><strong>基本信息</strong></Col>
                <Col span="21">
                    <CheckboxGroup v-model="rjry">
                        <Checkbox label="姓名"></Checkbox>
                        <Checkbox label="性别"></Checkbox>
                        <Checkbox label="年龄"></Checkbox>
                        <Checkbox label="证件号码"></Checkbox>
                        <Checkbox label="联系电话"></Checkbox>
                        <Checkbox label="国籍"></Checkbox>
                        <Checkbox label="户籍地址"></Checkbox>
                        <Checkbox label="护照号"></Checkbox>
                        <Checkbox label="入境时间"></Checkbox>
                        <Checkbox label="人员来源地"></Checkbox>
                        <Checkbox label="人员入境口岸"></Checkbox>
                        <Checkbox label="人员入沈日期"></Checkbox>
                        <Checkbox label="目标城市"></Checkbox>
                        <Checkbox label="本市现住址"></Checkbox>
                        <Checkbox label="蓝牌地址"></Checkbox>
                        <Checkbox label="区县"></Checkbox>
                        <Checkbox label="街道"></Checkbox>
                        <Checkbox label="社区"></Checkbox>
                        <Checkbox label="人员状态"></Checkbox>
                        <Checkbox label="人员状态备注"></Checkbox>
                        <Checkbox label="入沈交通方式"></Checkbox>
                        <Checkbox label="入沈交通工具班次(车次)"></Checkbox>
                        <Checkbox label="机舱等级(车厢号/车牌号)"></Checkbox>
                        <Checkbox label="座位号"></Checkbox>
                        <Checkbox label="来沈后活动路径"></Checkbox>
                        <Checkbox label="来沈前经过地类型"></Checkbox>
                        <Checkbox label="来沈前经过地"></Checkbox>
                        <Checkbox label="同行人员"></Checkbox>
                        <Checkbox label="来沈前经过地省"></Checkbox>
                        <Checkbox label="来沈前经过地市"></Checkbox>
                        <Checkbox label="户籍地区"></Checkbox>
                        <Checkbox label="户籍类型"></Checkbox>
                        <Checkbox label="来沈事由"></Checkbox>
                    </CheckboxGroup>
                </Col>
            </Row>
            <Divider />
            <Row :gutter="10">
                <Col span="3"><strong>中转信息</strong></Col>
                <Col span="21">
                    <CheckboxGroup v-model="zzxx">
                        <Checkbox label="离沈时间"></Checkbox>
                        <Checkbox label="人员中转"></Checkbox>
                        <Checkbox label="离沈去向"></Checkbox>
                        <Checkbox label="目的地城市"></Checkbox>
                        <Checkbox label="离沈方式"></Checkbox>
                        <Checkbox label="离沈交通工具班次(车次)"></Checkbox>
                        <Checkbox label="机舱等级(车厢号/车牌号)"></Checkbox>
                        <Checkbox label="座位号"></Checkbox>
                        <Checkbox label="起飞地"></Checkbox>
                        <Checkbox label="中转站"></Checkbox>
                        <Checkbox label="中转站交通工具班次(车次)"></Checkbox>
                        <Checkbox label="中转站机舱等级(车厢号/车牌号)"></Checkbox>
                        <Checkbox label="转运方式"></Checkbox>
                        <Checkbox label="接收人"></Checkbox>
                        <Checkbox label="车牌号码"></Checkbox>
                        <Checkbox label="司机姓名"></Checkbox>
                        <Checkbox label="联系电话"></Checkbox>
                    </CheckboxGroup>
                </Col>
            </Row>
            <Divider />
            <Row :gutter="10">
                <Col span="3"><strong>密接信息</strong></Col>
                <Col span="21">
                    <CheckboxGroup v-model="mjxx">
                        <Checkbox label="患者姓名"></Checkbox>
                        <!--<Checkbox label="来源国家"></Checkbox>-->
                        <Checkbox label="确诊时间"></Checkbox>
                        <!--<Checkbox label="证件类型"></Checkbox>-->
                        <!--<Checkbox label="证件号码"></Checkbox>-->
                        <!--<Checkbox label="联系电话"></Checkbox>-->
                        <Checkbox label="密接时间"></Checkbox>
                        <Checkbox label="密接方式"></Checkbox>
                        <Checkbox label="密接人现状"></Checkbox>
                        <Checkbox label="与患者关系"></Checkbox>
                        <Checkbox label="最早接触时间"></Checkbox>
                        <Checkbox label="最后接触时间"></Checkbox>
                        <Checkbox label="接触地点"></Checkbox>
                        <Checkbox label="接触频率"></Checkbox>
                        <Checkbox label="单次暴露时间"></Checkbox>
                        <Checkbox label="跟进状态"></Checkbox>
                    </CheckboxGroup>
                </Col>
            </Row>
            <Divider />
            <Row :gutter="10">
                <Col span="3"><strong>接触信息</strong></Col>
                <Col span="21">
                    <CheckboxGroup v-model="jcxx">
                        <!--<Checkbox label="患者姓名"></Checkbox>-->
                        <!--<Checkbox label="来源国家"></Checkbox>-->
                        <!--<Checkbox label="确诊时间"></Checkbox>-->
                        <!--<Checkbox label="证件类型"></Checkbox>-->
                        <!--<Checkbox label="证件号码"></Checkbox>-->
                        <!--<Checkbox label="联系电话"></Checkbox>-->
                        <Checkbox label="接触时间"></Checkbox>
                        <Checkbox label="接触方式"></Checkbox>
                        <Checkbox label="接触人现状"></Checkbox>
                        <Checkbox label="接触人员"></Checkbox>
                    </CheckboxGroup>
                </Col>
            </Row>
            <Divider />
            <Row :gutter="10">
                <Col span="3"><strong>隔离信息</strong></Col>
                <Col span="21">
                    <CheckboxGroup v-model="glxx">
                        <Checkbox label="隔离时间"></Checkbox>
                        <Checkbox label="隔离方式"></Checkbox>
                        <Checkbox label="隔离地点"></Checkbox>
                        <Checkbox label="隔离地点蓝牌地址"></Checkbox>
                        <Checkbox label="隔离管理单位"></Checkbox>
                        <Checkbox label="隔离管理人"></Checkbox>
                        <Checkbox label="隔离性质"></Checkbox>
                        <Checkbox label="隔离原因"></Checkbox>
                        <Checkbox label="隔离解除时间"></Checkbox>
                        <Checkbox label="送诊时间"></Checkbox>
                        <Checkbox label="送诊地址"></Checkbox>
                        <Checkbox label="医学观察人姓名"></Checkbox>
                        <Checkbox label="医学观察人手机"></Checkbox>
                        <Checkbox label="医学观察人单位"></Checkbox>
                    </CheckboxGroup>
                </Col>
            </Row>
            <Divider />
            <Row :gutter="10">
                <Col span="3"><strong>核酸检测</strong></Col>
                <Col span="21">
                    <CheckboxGroup v-model="hsjc">
                        <Checkbox label="样品来源"></Checkbox>
                        <Checkbox label="第一次采样日期"></Checkbox>
                        <Checkbox label="采样次数一"></Checkbox>
                        <Checkbox label="第一次检验结果"></Checkbox>
                        <Checkbox label="第二次血清采样日期"></Checkbox>
                        <Checkbox label="采样次数二"></Checkbox>
                        <Checkbox label="第二次血清检验结果"></Checkbox>
                        <Checkbox label="第三次采样日期"></Checkbox>
                        <Checkbox label="采样次数三"></Checkbox>
                        <Checkbox label="第三次检验结果"></Checkbox>
                        <Checkbox label="收治处置"></Checkbox>
                        <Checkbox label="异常信息"></Checkbox>
                        <Checkbox label="批准备注"></Checkbox>
                    </CheckboxGroup>
                </Col>
            </Row>
            <Divider />
            <Row :gutter="10">
                <Col span="3"><strong>确诊信息</strong></Col>
                <Col span="21">
                    <CheckboxGroup v-model="qzxx">
                        <Checkbox label="病人属于"></Checkbox>
                        <Checkbox label="人群分类"></Checkbox>
                        <Checkbox label="病例分类"></Checkbox>
                        <Checkbox label="发病日期"></Checkbox>
                        <Checkbox label="诊断日期"></Checkbox>
                        <Checkbox label="疾病名称"></Checkbox>
                        <Checkbox label="订证前病种"></Checkbox>
                        <Checkbox label="订证前诊断时间"></Checkbox>
                        <Checkbox label="订证报告时间"></Checkbox>
                        <Checkbox label="订证终审时间"></Checkbox>
                        <Checkbox label="临床严重程度"></Checkbox>
                        <Checkbox label="转诊状态"></Checkbox>
                        <Checkbox label="订证前终审时间"></Checkbox>
                        <Checkbox label="报告单位"></Checkbox>
                        <Checkbox label="报告卡录入时间"></Checkbox>
                        <Checkbox label="是否输入病例"></Checkbox>
                        <Checkbox label="初验接触隔离时间"></Checkbox>
                    </CheckboxGroup>
                </Col>
            </Row>
        </div>
        <div class="demo-drawer-footer">
            <Button style="margin-right: 8px" @click="value2 = false">取消</Button>
            <Button type="primary" @click="value2 = false">确定</Button>
        </div>
    </Drawer>
    <Drawer
            title="数据筛选"
            v-model="value1"
            width="300"
            :mask-closable="false"
            :styles="styles"
            placement="left"
    >
        <div class="inner-frame">
            <Row :gutter="10">
                <Col span="24">
                    <Tree :data="data2" show-checkbox></Tree>
                </Col>
            </Row>
        </div>
        <div class="demo-drawer-footer">
            <Button style="margin-right: 8px" @click="value1 = false">取消</Button>
            <Button type="primary" @click="value1 = false">确定</Button>
        </div>
    </Drawer>
    <Drawer
            title="数据类别"
            v-model="value4"
            width="300"
            :mask-closable="false"
            :styles="styles"
            placement="left"
    >
        <div class="inner-frame">
            <Row :gutter="10">
                <Col span="24">
                    <Button type="primary" style="width: 100%;">入沈人员数据</Button>
                </Col>
            </Row>
            <Row :gutter="10">
                <Col span="24">
                    <Button type="primary" style="width: 100%;">转运人员数据</Button>
                </Col>
            </Row>
            <Row :gutter="10">
                <Col span="24">
                    <Button type="primary" style="width: 100%;">隔离人员数据</Button>
                </Col>
            </Row>
            <Row :gutter="10">
                <Col span="24">
                    <Button type="primary" style="width: 100%;">密接人员数据</Button>
                </Col>
            </Row>
            <Row :gutter="10">
                <Col span="24">
                    <Button type="primary" style="width: 100%;">接触人员数据</Button>
                </Col>
            </Row>
            <Row :gutter="10">
                <Col span="24">
                    <Button type="primary" style="width: 100%;">隔离宾馆数据</Button>
                </Col>
            </Row>
            <Row :gutter="10">
                <Col span="24">
                    <Button type="primary" style="width: 100%;">核酸检测数据</Button>
                </Col>
            </Row>
            <Row :gutter="10">
                <Col span="24">
                    <Button type="primary" style="width: 100%;">预警提示数据</Button>
                </Col>
            </Row>
        </div>
        <div class="demo-drawer-footer">
            <Button style="margin-right: 8px" @click="value4 = false">取消</Button>
            <Button type="primary" @click="value4 = false">确定</Button>
        </div>
    </Drawer>
</div>
</template>
<script>
export default {
  data () {
    return {
      border: ['全市'],
      value1: false,
      value2: false,
      value3: false,
      value4: false,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      countryList: [
        {
          value: '中国',
          label: '中国'
        },
        {
          value: '美国',
          label: '美国'
        },
        {
          value: '日本',
          label: '日本'
        },
        {
          value: '韩国',
          label: '韩国'
        }
      ],
      data2: [
        {
          title: '全市',
          expand: true,
          children: [
            {
              title: '和平',
              expand: true
            },
            {
              title: '沈河',
              expand: true
            },
            {
              title: '铁西',
              expand: true
            },
            {
              title: '皇姑',
              expand: true
            },
            {
              title: '大东',
              expand: true
            },
            {
              title: '浑南',
              expand: true
            },
            {
              title: '于洪',
              expand: true
            },
            {
              title: '沈北',
              expand: true
            },
            {
              title: '苏家屯',
              expand: true
            },
            {
              title: '辽中',
              expand: true
            },
            {
              title: '新民',
              expand: true
            },
            {
              title: '法库',
              expand: true
            },
            {
              title: '康平',
              expand: true
            }
          ]
        }
      ],
      columns1: [
        {
          title: '姓名',
          key: 'name',
          align: 'center'
        },
        {
          title: '性别',
          key: 'sex',
          align: 'center',
          filters: [
            {
              label: '男',
              value: '男'
            },
            {
              label: '女',
              value: '女'
            }
          ],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value === '男') {
              return row.sex === '男'
            } else if (value === '女') {
              return row.sex === '女'
            }
          }
        },
        {
          title: '年龄',
          key: 'age',
          align: 'center',
          sortable: true
        },
        {
          title: '证件类型',
          key: 'card_type',
          align: 'center',
          filters: [
            {
              label: '身份证',
              value: '身份证'
            },
            {
              label: '护照',
              value: '护照'
            }
          ],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value === '身份证') {
              return row.card_type === '身份证'
            } else if (value === '护照') {
              return row.card_type === '护照'
            }
          }
        },
        {
          title: '证件号码',
          key: 'card_no',
          align: 'center'
        },
        {
          title: '联系电话',
          key: 'tel',
          align: 'center'
        }
      ],
      data1: [
        {
          staus: '待提报',
          name: '文长永',
          sex: '男',
          age: '45',
          card_type: '身份证',
          card_no: '210423197504243012',
          tel: '13941397848',
          lssj: '2020-03-14',
          lsqx: '抚顺',
          mddcs: '抚顺',
          lsfs: '飞机',
          lsjtgj: '',
          jc: '经济舱',
          come_from: '英国',
          zwh: 'E3'
        },
        {
          staus: '待审核',
          name: '徐雨薇',
          sex: '女',
          age: '25',
          card_type: '身份证',
          card_no: '370682199511218821',
          tel: '13280916835',
          lssj: '2020-03-15',
          lsqx: '莱阳',
          mddcs: '山东',
          lsfs: '飞机',
          lsjtgj: '东航M56Z',
          jc: '经济舱',
          come_from: '日本',
          zwh: 'E3'
        },
        {
          staus: '待提报',
          name: '马莉',
          sex: '女',
          age: '39',
          card_type: '身份证',
          card_no: '211003198701124328',
          tel: '13941925400',
          lssj: '2020-03-13',
          lsqx: '朝阳',
          mddcs: '天津',
          lsfs: '飞机',
          lsjtgj: '南航Z560',
          jc: '经济舱',
          come_from: '美国',
          zwh: 'E3'
        },
        {
          staus: '待提报',
          name: '孟欣宇',
          sex: '男',
          age: '39',
          card_type: '身份证',
          card_no: '211282199604270017',
          tel: '15542053993',
          lssj: '2020-03-15',
          lsqx: '开源',
          mddcs: '济南',
          lsfs: '飞机',
          lsjtgj: '',
          jc: '经济舱',
          come_from: '德国',
          zwh: 'E3'
        },
        {
          staus: '待提报',
          name: '崔永浩',
          sex: '男',
          age: '48',
          card_type: '身份证',
          card_no: '210403197203241835',
          tel: '13904939576',
          lssj: '2020-03-15',
          lsqx: '营口',
          mddcs: '石家庄',
          lsfs: '飞机',
          lsjtgj: '东航Z237',
          jc: '经济舱',
          come_from: '日本',
          zwh: 'E3'
        },
        {
          staus: '已提报',
          name: '罗宇豪',
          sex: '男',
          age: '19',
          card_type: '身份证',
          card_no: '431382200107225137',
          tel: '130****9990',
          lssj: '2020-03-15',
          lsqx: '大连',
          mddcs: '河北',
          lsfs: '飞机',
          lsjtgj: '东航M537',
          jc: '经济舱',
          come_from: '美国',
          zwh: 'E3'
        },
        {
          staus: '待审核',
          name: '来桂香',
          sex: '女',
          age: '52',
          card_type: '身份证',
          card_no: '210402196806192728',
          tel: '15642002212',
          lssj: '2020-03-13',
          lsqx: '丹东',
          mddcs: '河北',
          lsfs: '飞机',
          lsjtgj: '东航M56Z',
          jc: '经济舱',
          come_from: '德国',
          zwh: 'E3'
        },
        {
          staus: '待提报',
          name: '郭丰',
          sex: '男',
          age: '25',
          card_type: '身份证',
          card_no: '232301199502200319',
          tel: '18245919532',
          lssj: '2020-03-15',
          lsqx: '朝阳',
          mddcs: '郑州',
          lsfs: '飞机',
          lsjtgj: '东航M56Z',
          jc: '经济舱',
          come_from: '美国',
          zwh: 'E3'
        },
        {
          staus: '待提报',
          name: '范业学',
          sex: '男',
          age: '67',
          card_type: '身份证',
          card_no: '211222195303253438',
          tel: '15841030982',
          lssj: '2020-03-16',
          lsqx: '大连',
          mddcs: '黑龙江',
          lsfs: '飞机',
          lsjtgj: '东航M562',
          jc: '经济舱',
          come_from: '加拿大',
          zwh: 'E3'
        },
        {
          staus: '待提报',
          name: '丁艳玲',
          sex: '女',
          age: '37',
          card_type: '身份证',
          card_no: '210921198301195427',
          tel: '13324181119',
          lssj: '2020-03-18',
          lsqx: '大连',
          mddcs: '河北',
          lsfs: '飞机',
          lsjtgj: '东航M569',
          jc: '经济舱',
          come_from: '美国',
          zwh: 'E3'
        },
        {
          staus: '待提报',
          name: '王红阳',
          sex: '女',
          age: '22',
          card_type: '身份证',
          card_no: '211221199801300315',
          tel: '13050801127',
          lssj: '2020-03-20',
          lsqx: '营口',
          mddcs: '山东',
          lsfs: '飞机',
          lsjtgj: 'Z564',
          jc: '经济舱',
          come_from: '美国',
          zwh: 'E3'
        },
        {
          staus: '待提报',
          name: '金日金',
          sex: '男',
          age: '37',
          card_type: '身份证',
          card_no: '211122198309011382',
          tel: '13836132912',
          lssj: '2020-03-25',
          lsqx: '大连',
          mddcs: '河北',
          lsfs: '飞机',
          lsjtgj: '东航M56Z',
          jc: '经济舱',
          come_from: '美国',
          zwh: 'E3'
        },
        {
          staus: '待提报',
          name: '李世杰',
          sex: '男',
          age: '39',
          card_type: '身份证',
          card_no: '211221194510212419',
          tel: '13050842149',
          lssj: '2020-03-23',
          lsqx: '大连',
          mddcs: '河南',
          lsfs: '飞机',
          lsjtgj: '东航M56Z',
          jc: '经济舱',
          come_from: '美国',
          zwh: 'E3'
        },
        {
          staus: '待提报',
          name: '焦宇新',
          sex: '男',
          age: '39',
          card_type: '身份证',
          card_no: '210402199804201516',
          tel: '13470577654',
          lssj: '2020-03-25',
          lsqx: '大连',
          mddcs: '河北',
          lsfs: '飞机',
          lsjtgj: '东航M56Z',
          jc: '经济舱',
          come_from: '英国',
          zwh: 'E3'
        },
        {
          staus: '已提报',
          name: '李丽娟',
          sex: '女',
          age: '39',
          card_type: '身份证',
          card_no: '210402197009100020',
          tel: '13804137748',
          lssj: '2020-03-20',
          lsqx: '大连',
          mddcs: '河北',
          lsfs: '飞机',
          lsjtgj: '东航M56Z',
          jc: '经济舱',
          come_from: '韩国',
          zwh: 'E3'
        },
        {
          staus: '待提报',
          name: '高川凯',
          sex: '男',
          age: '39',
          card_type: '身份证',
          card_no: '211022199909296077',
          tel: '15809843225',
          lssj: '2020-03-25',
          lsqx: '大连',
          mddcs: '河北',
          lsfs: '飞机',
          lsjtgj: '东航M56Z',
          jc: '经济舱',
          come_from: '英国',
          zwh: 'E3'
        },
        {
          staus: '待提报',
          name: '刘文杰',
          sex: '男',
          age: '5139',
          card_type: '身份证',
          card_no: '210411196912150229',
          tel: '13504234568',
          lssj: '2020-03-25',
          lsqx: '大连',
          mddcs: '河北',
          lsfs: '飞机',
          lsjtgj: '东航M56Z',
          jc: '经济舱',
          come_from: '美国',
          zwh: 'E3'
        },
        {
          staus: '待提报',
          name: '周希文',
          sex: '男',
          age: '28',
          card_type: '身份证',
          card_no: '522127199204120013',
          tel: '18574635484',
          lssj: '2020-03-23',
          lsqx: '丹东',
          mddcs: '山东',
          lsfs: '飞机',
          lsjtgj: '东航M56Z',
          jc: '经济舱',
          come_from: '日本',
          zwh: 'E3'
        },
        {
          staus: '待提报',
          name: '张兴罗',
          sex: '男',
          age: '32',
          card_type: '身份证',
          card_no: '130182198802105345',
          tel: '13522256587',
          lssj: '2020-03-25',
          lsqx: '大连',
          mddcs: '河北',
          lsfs: '飞机',
          lsjtgj: '东航M56Z',
          jc: '经济舱',
          come_from: '美国',
          zwh: 'E3'
        },
        {
          staus: '已提报',
          name: '姜洪军',
          sex: '男',
          age: '35',
          card_type: '身份证',
          card_no: '210423198504040033',
          tel: '15541326422',
          lssj: '2020-03-21',
          lsqx: '阜新',
          mddcs: '河北',
          lsfs: '飞机',
          lsjtgj: '东航M56Z',
          jc: '经济舱',
          come_from: '美国',
          zwh: 'E3'
        },
        {
          staus: '待审核',
          name: '崔丽',
          sex: '女',
          age: '46',
          card_type: '身份证',
          card_no: '210422197409090242',
          tel: '13130353000',
          lssj: '2020-03-25',
          lsqx: '本溪',
          mddcs: '山东',
          lsfs: '飞机',
          lsjtgj: '东航M566',
          jc: '经济舱',
          come_from: '法国',
          zwh: 'E3'
        }
      ]
    }
  }
}
</script>

<style scoped>
    .container {}
    .sub-menu .sub-title {
        font-size: 48px;
        font-weight: 700;
        letter-spacing: 60px;
    }
    .img-responsive {
        display: inline-block;
        height: auto;
        width: 100%;
    }
    .header {
        /*margin-bottom: 20px;*/
    }
    .sub-menu {
        background-color: #052f6b;
        color: white;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 15px 20px;
    }
    .sub-menu>.total {
        font-size: 18px;
    }
    .sub-menu>.total>span {
        color: lightcoral;
        font-weight: 700;
        margin: 0 3px;
    }
    .btn-group {
        display: flex;
    }
    .btn-group>Button {
        margin-left: 10px;
    }
    .report-content {
        padding: 0 20px;
        height: auto;
    }
    .title {
        padding: 20px 0;
        border-bottom: 1px solid #efefef;
    }
    .sub-title {
        border-left: 7px solid darkred;
        font-size: 18px;
        font-weight: 700;
        padding-left: 10px;
        display: flex;
        justify-content: space-between;
    }
    .sub-title .group>span {
        margin: 0 3px;
        font-weight: 700;
        color: red;
    }
    .precent-group {
        display: flex;
        align-items: center;
    }
    .precent-group>.item {
        width: 180px;
        padding: 0 10px;
    }
    .precent-group>.item>.text {
        width: 100%;
    }
    .demo-drawer-footer {
        margin-top: 20px;
    }
    .inner-frame>.ivu-row {
        margin-bottom: 10px;
    }
    .county-sel {
        border: 1px solid #052f6b;
        border-radius: 5px;
        padding: 8px 20px;
        color: #052f6b;
    }
    .statistics-group {
        width: 100%;
        padding: 20px;
    }
    .statistics-group .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        background-color: white;
        border-radius: 10px;
    }
    .statistics-group .item.style01 {
        background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);
    }
    .statistics-group .item.style02 {
        background-image: linear-gradient(160deg, #0078ff 20%,#002abb 80%);
    }
    .statistics-group .item.style03 {
        background-image: linear-gradient(160deg, #00ffd5 20%,#008cff 80%);
    }
    .statistics-group .item.style04 {
        background-image: linear-gradient(160deg, #ffce00 20%,#ff8b00 80%);
    }
    .statistics-group .item .icon {
        font-size: 46px;
        color: white;
    }
    .statistics-group .item .content .txt{
        font-size: 14px;
        color: white;
        text-align: right;
    }
    .statistics-group .item .content .statistics{
        font-size: 32px;
        color: white;
    }
</style>
